.consoleCardTitle {
  cursor: default;
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  opacity: 0.85;
}
.consoleBackgroud {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(180deg, #1890ff 0%, #1890ff00 100%);
  background-size: 100% 320px;
  background-repeat: no-repeat;
  opacity: 0.06;
}
.consoleWrapper {
  :global {
    .ant-card-body {
      padding: 20px;
    }
  }
  cursor: default;
  overflow-y: scroll;
  padding: 16px 24px 24px 18px;
  .articleTitleTypograpy {
    display: flex;
    align-items: center;
    height: 20px;
    width: fit-content;
    font-size: 12px;
    color: #000000;
    line-height: 20px;
    opacity: 0.65;
  }

  .header {
    height: 74px;
    gap: 8px;
    .title {
      font-size: 20px;
      line-height: 28px;
      color: var(--text-color-primary);
      font-weight: 600;
      opacity: 0.85;
    }
    .subTitle {
      font-size: 14px;
      color: var(--text-color-hint);
      line-height: 22px;
    }
  }

  .content {
    .topAreaFilter {
      opacity: 0.9;
      background-color: #fff;
    }
    .top {
      height: 372px;
      margin-bottom: 16px;

      .schedules {
        .consoleCardTitle {
          .title {
            display: inline-block;
            margin-right: 12px;
          }
          .consoleTips {
            display: inline-block;
            font-size: 12px;
            color: var(--text-color-hint);
            line-height: 22px;
            font-weight: 400;
          }
        }

        .card {
          height: 372px;
          .icon {
            display: inline-block;
            width: 8px;
            height: 8px;
          }
          .legend {
            display: flex;
            gap: 16px;
            height: 20px;
            margin-top: 8px;
            .label {
              color: var(--text-color-secondary);
              cursor: default;
            }
          }
        }
        .scheduleItems {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
        }
      }

      .quickStart {
        &:hover {
          .consoleCardTitle {
            .hide {
              opacity: 1;
            }
          }
        }

        .moreFunctionIntro {
          color: var(--text-color-secondary);
          cursor: pointer;
        }
        .consoleCardTitle {
          display: flex;
          &:hover {
            .hide {
              opacity: 1;
            }
          }
          .hide {
            opacity: 0;
            transition: top 0.3s ease;
            font-weight: 400;
            display: inline-flex;
            margin-left: auto;
            font-size: 12px;
            color: var(--text-color-link);
            line-height: 20px;
            text-align: right;
          }
        }
        .card {
          padding: 4px;
          overflow: hidden;

          :global {
            .ant-card-body {
              height: 364px;
              padding: 12px;
              background-image: linear-gradient(125deg, #f9fbfd, #e9f3fe);
            }
          }
          .quickStartContent {
            display: flex;
            flex-direction: row;
            .leftWrapper {
              display: inline-flex;
              flex-direction: column;
              .descriptions {
                max-width: 412px;
              }
              .tabs {
                margin-top: 16px;
              }
              .steps {
                height: 140px;
                .stepItem {
                  display: flex;
                  cursor: pointer;
                  align-items: center;
                  height: 20px;
                  margin-top: 20px;
                  &:nth-child(1) {
                    margin-top: 4px;
                  }

                  .stepIcon {
                    width: 16px;
                    height: 16px;
                    background-color: #d8d8d8;
                    border-radius: 9px;
                    font-size: 11px;
                    color: #ffffff;
                    line-height: 16px;
                    text-align: center;
                    font-weight: 600;
                    &.active {
                      background-color: var(--icon-color-focus);
                    }
                  }
                  .stepLabel {
                    font-size: 12px;
                    line-height: 20px;
                    opacity: 0.85;
                    &.active {
                      font-size: 12px;
                      color: var(--text-color-link);
                      line-height: 20px;
                    }
                  }
                }
              }
            }
            .rightWrapper {
              display: inline;
              margin-left: 156px;
              .gif {
                width: 400px;
                height: 300px;
              }
            }
          }
        }
      }
    }

    .bottom {
      height: auto;

      .recently {
        padding-right: 8px;
        .card {
          flex: 1;
          display: flex;
          flex-direction: column;
        }
        :global {
          .ant-card-body {
            min-height: 521px;
          }
        }
      }

      .docWrapper {
        padding-left: 8px;

        .aboutUs {
          height: 174px;
          :global {
            .ant-card-body {
              padding: 16px;
            }
          }
        }

        .practice {
          height: 332px;
          :global {
            .ant-card-body {
              padding: 16px;
            }
          }
          &:nth-child(2) {
            margin-top: 16px;
          }
          .consoleCardTitle {
            display: flex;
            .showMore {
              cursor: pointer;
              font-weight: 400;
              display: inline-flex;
              margin-left: auto;
              font-size: 12px;
              color: var(--text-color-secondary);
              line-height: 20px;
              text-align: right;
            }
          }
        }

        .aboutUsHelpDocItem {
          height: 20px;
          margin-top: 20px;
          &:nth-child(1) {
            margin-top: 16px;
          }
          .docs {
            cursor: pointer;
            font-size: 12px;
            line-height: 20px;
            color: var(--text-color-secondary);
            &:hover {
              opacity: 1;
              color: var(--text-color-link);
            }
          }
        }
        .aboutUsContent {
          display: flex;
          justify-content: space-between;
        }
        .article {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          color: var(--text-color-secondary);
          margin-top: 14px;
          font-size: 12px;
          line-height: 20px;
          &:hover {
            opacity: 1;
            cursor: pointer;
            font-size: 12px;
            color: var(--text-color-link);
            line-height: 20px;
          }
          &:nth-child(2) {
            margin-top: 16px;
          }
        }
      }
    }
  }
}
